<template>
  <div class="login">
    <div class="login-card">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="密码登录" name="password">
            <el-form
              :model="loginForm"
              status-icon
              ref="loginForm"
              class="login-form"
              :rules="rules"
              label-position="right"
            >
              <el-form-item label="账号" prop="username">
                <el-input
                  type="username"
                  v-model="loginForm.username"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  v-model="loginForm.password"
                ></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-col :span="10">
                  <el-input
                    type="text"
                    v-model="loginForm.code"
                    placeholder="请输入验证码"
                    @keydown.enter.native="submitLogin"
                  ></el-input>
                </el-col>
                <el-col :span="4">
                  <img :src="img" alt="验证码" @click="init"
                /></el-col>
              </el-form-item>
              <el-form-item>
                <div class="submit">
                  <el-button type="primary" @click="submit">提交</el-button>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="button-container">
                  <el-button type="text" @click="register" style="float: left"
                    >注册</el-button
                  >
                  <el-button type="text" @click="register" style="float: right"
                    >忘记密码</el-button
                  >
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="邮箱登录" name="email">
            <el-form
              :model="emailForm"
              status-icon
              ref="emailForm"
              :rules="emailRules"
              class="login-form"
              label-position="right"
            >
            
              <el-form-item label="QQ邮箱号" prop="email">
                <el-col :span="10">
                  <el-input
                    type="email"
                    v-model="emailForm.email"
                    autocomplete="off"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <el-button type="text" @click="send" v-if="isSend"
                    >发送验证码</el-button
                  >
                  <el-button type="text" v-if="!isSend">{{
                    sendmsg
                  }}</el-button>
                </el-col>
              </el-form-item>
              <el-form-item label="验证码" prop="e_code">
                <el-input type="text" v-model="emailForm.e_code"></el-input>
              </el-form-item>

              <el-form-item>
                <div class="submit">
                  <el-button type="primary" @click="submitEmail"
                    >提交</el-button
                  >
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { login } from "../api";
import { getVeriCode } from "../api";
import { emaillogin } from "../api";
import { getEmailCode } from "../api";

const reg =
  /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
const checkEmail = (rule, value, cb) => {
  if (reg.test(value)) {
    cb();
  } else {
    cb(new Error("邮箱格式错误"));
  }
};

export default {
  data() {
    return {
      loginForm: {
        username: "test2022",
        password: "test2022",
        uuid: "",
        code: "",
      },
      sendmsg: "发送验证码",
      isSend: true,
      emailForm: {
        email: "",
        e_code: "",
      },
      activeName: "email",
      img: "",
      rules: {
        //required:true:用户名必填  如果没填就弹出““””“"请输入用户名",trigger:blur 触发的方式是blur
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      },
      emailRules: {
        email: [
          {
            required: true,
            validator: checkEmail,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getEmail() {
      getEmailCode({ email: this.emailForm.email }).then((res) => {
        console.log(res);
      });
    },
    send() {
      if (reg.test(this.emailForm.email)) {
        getEmailCode({ email: this.emailForm.email }).then((res) => {
          if (res.flag) {
            this.isSend = false;
            let timer = 60;
            this.sendmsg = timer + "s";
            this.timeFun = setInterval(() => {
              --timer;
              this.sendmsg = timer + "s";
              if (timer == 0) {
                this.isSend = true;
                this.sendmsg = "重新发送";
                clearInterval(this.timeFun);
              }
            }, 1000);
          }
        });
      }else{
        this.$message.error("邮件格式错误")
      }
    },
    init() {
      getVeriCode().then((res) => {
        this.img = res.data.img;
        this.loginForm.uuid = res.data.uuid;
      });
    },
    submit() {
      this.$refs.loginForm.validate((validate) => {
        if (validate) {
          login(this.loginForm).then((res) => {
            if (res.flag) {
              this.$message.success("登录成功");
              this.$store.commit("SET_LOGIN_USER", res.data);
              this.$router.push("/");
            } else {
              this.$message.error(res.message);
              this.init();
            }
          });
        }
      });
    },
    register() {
      // this.$router.push("/register");
      this.$message.info("开发中");
    },
    submitEmail() {
      emaillogin(this.emailForm).then((res) => {
        if (res.flag) {
          this.$message.success("登录成功");
          this.$store.commit("SET_LOGIN_USER", res.data);
          this.$router.push("/");
        } else {
          this.$message.error(res.message);
          this.init();
        }
      });
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.userinfo
        ? this.$store.state.userinfo.avatar
        : null;
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  // background-image: url("https://img.1ppt.com/uploads/allimg/2010/1_201026214635_2.jpg");
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
}

@media screen and (max-width: 768px) {
  .login-card {
    .el-card {
      width: 90vw !important;
      height: 65vh !important;
    }
  }
}

.login-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-card {
    width: 600px;
    height: 500px;
    border-radius: 18px;
    h1 {
      position: absolute;
      top: 0;
      right: 50%;
      transform: translateX(50%);
    }
  }
}
.login-form {
  margin-top: 28px;
}
.button-container {
  width: 100%;
}
.submit .el-button {
  width: 100% !important;
}
</style>